/* 
Kronos
Made by Evan Moulson
*/

body {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
}

.row {
  display: flex;
  flex-basis: auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.column {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer {
  height: 100%;
  height: -moz-available;          /* WebKit-based browsers will ignore this. */
  height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
  height: fill-available;
}

@media screen and (min-width: 800px) {
  .small_col {
    flex: 2.5;
  }

  .big_col {
    flex: 7.5;
  }
}

input {
  width: 80%;
  font-size: 4vmax;
  font-weight: 300;
  font-family: inherit;
  color: #d3d9dd;
  outline: 0;
  border: none;
  border-bottom: 0.1vw solid #d3d9dd;
  background: rgba(0, 0, 0, 0);
  margin: 5vmin 0 0 2vw;
  display: block;
}

.local_tz {
  font-size: 1vw;
  font-weight: 300;
  font-style: italic;
  color: #a0a0a0;
  margin: .5vh 0 2vh 2vw;
  display: block;
}

.row.top {
  background: #1A343D;
}

.column.label {
  background: #4EBFDF;
}

.tz_label {
  font-size: calc(1.8vw + 1vh + .9vmin);
  white-space: nowrap;
  margin: 6vmin 0vh 6vmin 10%;
}

.geo_emoji {
  display: inline-block;
  width: 20%;
}

.geo_name {
  font-weight: 700;
  color: #FFFFFF;
  display: inline-block;
  width: 80%;
}

.tz_time {
  font-size: 2.7vmax;
  font-weight: 300;
  color: #1A343D;
  margin: 2vw 0 0 2vw;
  display: block;
}

.tz_iso_time {
  font-size: 2vmax;
  font-weight: 300;
  font-style: italic;
  color: #a0a0a0;
  margin: 0 0 2vw 2vw;
  display: block;
}
